<template>
  <s-form-item v-bind="attrs">
    <component
      :is="all[type]"
      ref="item"
      v-model="form[properties.key]"
      v-bind="extendAttrs"
      :disabled="disableItem || properties.disabled == '1'"
      @change="
        (v) => {
          $emit('change', { key: properties.key, value: v })
        }
      "
    />
  </s-form-item>
  <slot name="item" :properties="properties" :type="type"></slot>
</template>
<script>
import SSelect from '@/components/extends/select/index.vue'
import SInput from '@/components/extends/input/index.vue'
import SInputNumber from '@/components/extends/inputNumber/index.vue'
import SSelectTree from '@/components/extends/selectTree/index.vue'
import SDatePicker from '@/components/extends/datePicker/index.vue'
import SImg from '@/components/extends/img/index.vue'
import SFile from '@/components/extends/file/index.vue'
import SSwitch from '@/components/extends/switch/index.vue'
import SCheckBox from '@/components/extends/checkbox/index.vue'
import SRadio from '@/components/extends/radio/index.vue'
import BaseItem from './BaseItem.js'
import STextArea from '@/components/extends/textarea/index.vue'
import SCascader from '@/components/extends/cascader/index.vue'
import SProvince from '@/components/extends/province/index.vue'
import SIconSelect from '@/components/extends/iconselect/index.vue'
import SRate from '@/components/extends/rate/index.vue'
import STag from '@/components/extends/tag/index.vue'
import SSlider from '@/components/extends/slider/index.vue'
import STransfer from '@/components/extends/transfer/index.vue'
import STree from '@/components/extends/tree/index.vue'
import SColorPicker from '@/components/extends/colorPicker/index.vue'
import { shallowRef } from 'vue'
export default {
  name: 'FormItem',
  extends: BaseItem,
  emits: ['change'],
  data() {
    return {
      all: {
        select: shallowRef(SSelect),
        input: shallowRef(SInput),
        radio: shallowRef(SRadio),
        checkbox: shallowRef(SCheckBox),
        inputNumber: shallowRef(SInputNumber),
        switch: shallowRef(SSwitch),
        selectTree: shallowRef(SSelectTree),
        datetime: shallowRef(SDatePicker),
        img: shallowRef(SImg),
        file: shallowRef(SFile),
        textarea: shallowRef(STextArea),
        province: shallowRef(SProvince),
        cascader: shallowRef(SCascader),
        iconSelect: shallowRef(SIconSelect),
        rate: shallowRef(SRate),
        slider: shallowRef(SSlider),
        tag: shallowRef(STag),
        transfer: shallowRef(STransfer),
        tree: shallowRef(STree),
        colorPicker: shallowRef(SColorPicker)
      }
    }
  },
  methods: {
    getRefByKey(key) {
      if (this.properties.key == key) {
        return this.$refs.item
      }
      return null
    }
  }
}
</script>
